{% extends 'base.html' %}
{% block title %}
    <title>书库</title>
{% endblock %}

{% block css %}
<style>
    .whole_book{
        display: flex;
        margin: 30px 0;
    }
    .whole_book img{
        width: 110px;
        height: 150px;
    }
</style>
{% endblock %}
{% block body %}
    <div role="tabpanel" class="tab-pane row" id="query" style="margin_top:50px">

        {% for book in books %}
            <div class="col-md-4 whole_book">
                <div><img src="/media/{{ book.image.image }}" alt=""></div>
                <div>
                    <span><a href="/detail/{{ book.id }}">{{ book.title }}</a></span>
                    <span>{{ book.update_time }}</span>
                    <span>{{ book.word_count.title }}字</span>
                    <span><a href="">{{ book.author.title }}</a></span>
                </div>
            </div>
        {% endfor %}
        </div>
{% endblock %}